function BackgroundGrid() {
    const [grid, setGrid] = React.useState([]);
    const size = 8; // 8x8 grid for background

    React.useEffect(() => {
        try {
            const generateBackgroundColors = () => {
                const baseHue = Math.random() * 360;
                const baseSaturation = 70;
                const baseLightness = 85;
                
                return Array(size * size).fill(null).map(() => {
                    const hueVariation = Math.random() * 20 - 10;
                    const saturationVariation = Math.random() * 10 - 5;
                    const lightnessVariation = Math.random() * 10 - 5;
                    
                    return {
                        color: `hsl(${baseHue + hueVariation}, ${baseSaturation + saturationVariation}%, ${baseLightness + lightnessVariation}%)`
                    };
                });
            };

            setGrid(generateBackgroundColors());

            // Regenerate colors every 5 seconds
            const interval = setInterval(() => {
                setGrid(generateBackgroundColors());
            }, 5000);

            return () => clearInterval(interval);
        } catch (error) {
            reportError(error);
        }
    }, []);

    return (
        <div 
            className="fixed inset-0 z-0 opacity-30" 
            data-name="background-grid"
        >
            <div 
                className="w-full h-full grid gap-4 p-4"
                style={{
                    gridTemplateColumns: `repeat(${size}, 1fr)`,
                }}
                data-name="background-grid-container"
            >
                {grid.map((cell, index) => (
                    <div
                        key={index}
                        className="w-full h-full rounded-lg transition-colors duration-2000"
                        style={{ backgroundColor: cell.color }}
                        data-name="background-cell"
                    />
                ))}
            </div>
        </div>
    );
}
